<template>
  <div class='page marketing grey-stage'>
    <div class="container scroll-container" >
      <group class="group">
        <cell title="我的潜在客户" :link="{
            path:'normal-client',
            query:{
              title: '我的潜在客户',
              custom_type:1,
              activeItem:'marketing',
              is_member:0
            },
          }">
          <i slot="icon" class="ico my-custom-ico"></i>
        </cell>
        <cell title="我的成交客户" :link="{
            path:'normal-client-cheng-jiao',
            query:{
              title: '我的成交客户',
              custom_type:1,
              activeItem:'marketing',
              is_member:1
            },
          }">
          <i slot="icon" class="ico my-custom-ico"></i>
        </cell>
        <cell  title="客户公海" :link="{
            path: 'normal-client-seas',
            query: {
              title: '客户公海',
              custom_type: 1,
              activeItem: 'marketing'
            }
          }">
          <i slot="icon" class="ico client-sea-ico"></i>
        </cell>
        <cell title="智能公海" :link="{path:'intel-client-seas',query:{
            title: '智能公海',
            custom_type: 1,
            type: 'intel',
            activeItem: 'marketing'
          }
        }">
          <i slot="icon" class="ico intel-sea-ico"></i>
        </cell>
    </group>
    <group class="group">
      <cell title="名单添加列表" :link="{path:'new-roll',query:{
            title: '名单添加列表',
            custom_type: 1,
            activeItem: 'marketing',
          }
        }">
          <i slot="icon" class="ico new-roll-ico"></i>
      </cell>
      <cell title="查重" :link="{path:'cha-chong',query:{
            title: '查重',
            custom_type: 1,
            activeItem: 'marketing',
            action: 'search'
          }
        }">
          <i slot="icon" class="ico cha-chong-ico"></i>
        </cell>
    </group>
    <group>

      <cell
              v-if="user.is_team_manager"
              title="团队潜在客户" :link="{path:'normal-reassign-client',query:{
            title: '团队潜在客户',
            custom_type:1,
            activeItem:'marketing',
            is_member:0
          }
        }">
        <i slot="icon" class="ico reassign-ico"></i>
      </cell>

      <cell
              v-if="user.is_team_manager"
              title="团队成交客户" :link="{path:'normal-reassign-client-cheng-jiao',query:{
              title: '团队成交客户',
              custom_type:1,
              activeItem:'marketing',
              is_member:1
            }
        }">
        <i slot="icon" class="ico reassign-ico"></i>
      </cell>
        
      </group>
    </div>
    <crm-cover v-if="isShowCover" :hideCoverOnClick="true"></crm-cover>
    <crm-tabbar v-if="!isAppMode" activeItem='marketing'></crm-tabbar>
  </div>

</template>
<script>
  // import Vue from 'vue'
  import crmTabbar from '../components/crm-tabbar'
  import salesTarget from '../components/sales-target'
  import salesPerformance from '../components/sales-performance'
  import salesExecutive from '../components/sales-executive'
  import topFilter from '../components/top-filter'
  import crmCover from '../components/crm-cover'
  // import {Cell, Group} from 'vux'
  import Group from 'vux/src/components/group'
  import Cell from 'vux/src/components/cell'
  import { mapState } from 'vuex'

  export default {
    data () {
      return {
        activated: true,
        containerHeight : 'height:'+document.body.scrollHeight+'px;'
      }
    },

    components: {
      crmTabbar,
      salesTarget,
      salesPerformance,
      salesExecutive,
      topFilter,
      crmCover,
      Cell,
      Group,
      // Scroller
    },
    activated () {
      this.activated = true
    },
    deactivated () {
      this.activated = false
    },
    methods: {
      refresh (iscroll) {
        console.log('refresh')
      // Refresh current data
      },

      log () {
        console.log('ee');
      },

      load (iscroll) {
        console.log('load')
      // Load new data
      },

      test () {
        console.log('test')
      }

    },

    computed:{
      isShowCover () {
        return this.$store.state.app.isShowCover
      },
      ...mapState({
        isAppMode: state => state.config.isAppMode,
        user: state => state.app.user
      })
    },

    mounted () {
      this.callJsApi('biz.navigation.setTitle',{title:'普通营销'});
    }

  }
</script>
<style lang="less">

  @import "../less/base";

  .marketing {
    height:100vh;
    overflow: hidden;
    padding-top: 15px;

     &>.container {
     }

     .group {
       margin: 0 0 4px;
     }

    .ico {
      width: 24px;
      height: 24px;
      display: block;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      margin-right: 10px;
    }

    .weui-cells {
      margin-top: 0;
    }

    .my-custom-ico {
      background-image: url('//fin.91mycloud.com/myCustoms.png');
    }

    .client-sea-ico {
      background-image: url('//fin.91mycloud.com/clientSea.png');
    }

    .cha-chong-ico {
      background-image: url('//fin.91mycloud.com/chachongico.png');
    }

    .intel-sea-ico {
      background-image: url('//fin.91mycloud.com/intelClientIco.png')
    }

    .reassign-ico {
      background-image: url('//fin.91mycloud.com/reassign-ico.png')
    }

    .new-roll-ico {
      background-image: url('//fin.91mycloud.com/new_customs_ico.png')
    }
  }
</style>
